<%--
  Created by IntelliJ IDEA.
  User: L
  Date: 2021/4/9
  Time: 10:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>省市级联查询</title>
  </head>
  <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
  <script type="text/javascript">
    $(function(){
      function city(id){
        $.ajax({
          url:"queryCity",
          data:{"id":id},
          dataType:"json",
          success:function(data){
            $("#city").empty();
            $.each(data,function(index,element){
              $("#city").append("<option>"+element.name+"</option>");
            });
          }
        });
      }






      //更新省份
      $.ajax({
        url:"queryProvince",
        dataType:"json",
        success:function(data){
          $.each(data,function(index,element){
            if(element.id == 1){
              city(1);
            }
            $("#province").append("<option value='"+element.id+"'>"+element.name+"</option>");
          });


          //更新市
          $("#province").on("change",function(){
            var id = $("#province").val();
            city(id);


          });

        }
      });



    });
  </script>
  <body>
    省份名称
    <select id="province">
    </select>

    城市
    <select id="city">
      <option ></option>
    </select>
  </body>
</html>
